<template>
	<view class="home-menus">
		<view class="item" v-for="(item, index) in cateory" :key="item.id" @tap="goNav(item.id)">
			<image class="img" :src="item.thumb" mode="widthFix"></image>
			<text :class="{label: true, 'label-bg': item.title?false:true} ">{{item.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'MyHomeMenus',
		data() {
			return {}
		},
		props: ['cateory'],
		methods: {
			goNav(cid) {
				uni.navigateTo({
					url: `/pages/home/list?cid=${cid}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.home-menus {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		padding-top: 10px;
		padding-bottom: 15px;

		.item {
			flex: 0 0 20%;
			text-align: center;
			padding-top: 5px;
			.img {
				display: block;
				width: 40px;
				height: 40px;
				margin: 0 auto;
        background: #f3f3f3;
        border-radius: 50%;
			}

			.label {
				display: block;
				margin-top: 5px;
				line-height: 25px;
				font-size: 13px;
			}
      .label-bg{
        display: inline-block;
        margin-top: 5px;
        line-height: 25px;
        font-size: 13px;
        background: #f3f3f3;
      }
		}
	}
</style>
